<template>
    <ZtScale>
        <screen :height="1080" title="武金区域物流仓储数据中心" :textWidth="250">
            <div class="menu">
                <div class="name">武威</div>
                <div class="name">金昌</div>
            </div>
            <div class="flex_row flex_between mgt_12">
                <div class="flex_column flex_between">
                    <dv-border-box-8 style="width: 310px; height: 256px; padding: 0 20px">
                        <div class="bb-card-title">1-6月入库\出库数统计</div>
                        <div class="flex-in-out">
                            <div class="total green">
                                <div class="text">入库数</div>
                                <!-- <dv-digital-flop class="num green" :config="{  number: [wwData.inNum], content: '{nt}个' }" style="width:200px;height:50px;" /> -->
                                <dance-number
                                    class="num green"
                                    :num="wwData.inNum"
                                    :max-length="8"
                                    color="#ff7700" />
                            </div>
                            <div class="total yellow">
                                <div class="text">出库数</div>
                                <dance-number
                                    class="num yellow"
                                    :num="wwData.outNum"
                                    color="#ff7700" />
                            </div>
                        </div>
                    </dv-border-box-8>
                    <dv-border-box-8 style="width: 310px; height: 346px; padding: 0 20px">
                        <div class="bb-card-title">本月/周均库存数量变化</div>
                        <div ref="chartRef" style="width: 300px; height: 300px" />
                    </dv-border-box-8>
                    <dv-border-box-8 style="width: 310px; height: 346px; padding: 0 20px">
                        <div class="bb-card-title">当日入库数量</div>
                        <!-- <div ref="inventChartRef" style="width: 300px; height: 300px" /> -->
                        <div class="swiper-slide" ref="main41Ref" style="width: 300px; height: 300px"></div>
                        <!-- <div class="swiper-container visual_swiper2 visual_chart">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" ref="main41Ref"></div>
                            </div>
                        </div> -->
                    </dv-border-box-8>
                </div>
                <div class="flex_column">
                    <div class="flex_row flex_between mgb_12">
                        <card :width="1160" :height="630" corner>
                            <div class="flex_row_center flex_between border_box pd_20 w_100 h_100">
                                <!-- <HotlineTop10 :datas="historyData?.hotRouteList" /> -->
                                <div class="flex_1 flex_column_center h_100">
                                    <div class="flex_1 w_100">
                                        <div class="w_100 h_100 visual_con" style="position: relative">
                                            <div class="flex_start">
                                                <div
                                                    class="flex_none visual_conTop_box visual_conTop1"
                                                    v-for="(item, index) in wwData.mapTopData"
                                                    :key="index"
                                                    :style="`width: ${item.width}px`">
                                                    <div class="flex_none_content">
                                                        <h3>{{ item.name }}</h3>
                                                        <dance-number
                                                            :num="item?.num"
                                                            :max-length="8"
                                                            :toFixed="2"
                                                            color="#ff7700" />
                                                        <span style="color: #ffffff">{{ item.unit }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- <div ref="mapRef" style="width: 100%;height: 600px"></div> -->
                                            <!-- <zt-echart :opts="mapOpts" :geo-json="mapJson"></zt-echart> -->
                                            <vue3Version style="height: 100%;" />
                                        </div>
                                    </div>
                                </div>
                                <!-- <RealtimeTicketCount
                                    :sale-ticket-list="realtimeData?.saleTicketList"
                                    :check-ticket-list="realtimeData?.checkTicketList" /> -->
                            </div>
                        </card>
                    </div>
                    <div class="flex_row flex_between">
                        <dv-border-box-8 style="width: 342px; height: 316px; padding: 0 20px">
                            <div class="bb-card-title">包装箱返还</div>

                            <div class="left-one-flex">
                                <div class="flex_none">
                                    <div class="white fs_18 mgb_12">同省累计<br />交接数量</div>
                                    <dance-number :num="100437" :max-length="8" color="#ff7700"></dance-number>
                                    <span style="color: #ffffff">(个)</span>
                                </div>
                                <div class="flex_none">
                                    <div class="white fs_18 mgb_12">毗邻省份累计<br />交接数量</div>
                                    <dance-number :num="15060" :max-length="8" color="#ff7700"></dance-number>
                                    <span style="color: #ffffff">(个)</span>
                                </div>
                                <div class="flex_none">
                                    <div class="white fs_18 mgb_12">同省交接比例</div>
                                    <dance-number :num="100" :max-length="8" color="#ff7700"></dance-number>
                                    <span style="color: #ffffff">(%)</span>
                                </div>
                                <div class="flex_none">
                                    <div class="white fs_18 mgb_12">毗邻省份交接比例</div>
                                    <dance-number :num="115.06" :max-length="8" color="#ff7700"></dance-number>
                                    <span style="color: #ffffff">(%)</span>
                                </div>
                            </div>
                        </dv-border-box-8>

                        <dv-border-box-8 style="width: 342px; height: 316px; padding: 0 20px">
                            <div class="bb-card-title">库存金额及占比</div>
                            <div ref="barRef" style="width: 342px; height: 276px" />
                        </dv-border-box-8>

                        <dv-border-box-8 style="width: 342px; height: 316px; padding: 0 20px">
                            <div class="bb-card-title">商品价类/价区</div>
                            <DirectionOfPeople
                                :flow-direction-list="wwData?.flowDirectionList"
                                style="width: 342px; height: 276px" />
                        </dv-border-box-8>
                    </div>
                </div>
                <div>
                    <dv-border-box-8 style="width: 310px; height: 474px; padding: 0 20px">
                        <div class="bb-card-title">库存工业公司排名</div>
                        <dv-scroll-ranking-board
                            :config="config"
                            style="width: 300px; height: 405px; margin-top: 20px" />
                    </dv-border-box-8>

                    <dv-border-box-8 style="width: 310px; height: 474px; padding: 0 20px; margin-top: 10px">
                        <div class="bb-card-title">库存品牌规格排名</div>
                        <dv-scroll-ranking-board
                            :config="config2"
                            style="width: 300px; height: 405px; margin-top: 20px" />
                    </dv-border-box-8>
                </div>
            </div>
        </screen>
    </ZtScale>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, unref, Ref } from "vue";
import { Screen, Card, DanceNumber, ZtEchart, ZtScale } from "@ztstory/datav-core";
import { EventBusUtils } from "@ztstory/datav-core/src/utils/eventbus.util";
import { throttle } from "@ztstory/datav-core/src/utils/common.util";
import HotlineTop10 from "../components/HotlineTop10.vue";
import RealtimeTicketCount from "@/components/RealtimeTicketCount.vue";
import RealtimeTicketPrice from "../components/RealtimeTicketPrice.vue";
import BasicData from "@/components/BasicData.vue";
import DeparturesNumber from "../components/DeparturesNumber.vue";
import CheckNumber from "@/components/CheckNumber.vue";
import ArriveNumber from "@/components/ArriveNumber.vue";
import DirectionOfPeople from "@/components/DirectionOfPeople.vue";
import mapJson from "@/assets/330000.geo.json";
import { mapOpts } from "@/components/IndexMap";
import * as echarts from "echarts";

import type {
    CountDateItem,
    CountRangeItem,
    FlowDirectionItem,
    HistoryDatas,
    RealTimeDatas,
    RouteItem,
    TicketPriceItem,
    TicketTypeItem,
} from "@/model/model";
import { wwData, jcData } from "./data";
import { DateUtils } from "@ztstory/datav-core/src/utils/date.util";
import vue3Version from "./vue3Version.vue";
import { circleOptions } from "./options";

const accumulatedSaleTicket = ref(0);
const configLeftOne = ref({
    data: [
        { name: "累计入库数", value: 452.62 },
        { name: "累计出库数", value: 79.2016 + 204.108 },
    ],
    radius: "40%",
    activeRadius: "48%",
    digitalFlopStyle: {
        fontSize: 20,
        fill: "#11ebd7",
    },
    color: ["#1370fb"],
    showOriginValue: true,
});
const config = ref({ data: wwData.industry, unit: "箱", carousel: "page" });
const config2 = ref({ data: wwData.brand, carousel: "page", unit: "箱" });
const chartRef = ref(null);
const main4Ref = ref(null);
const main41Ref = ref(null);
const barRef = ref(null);
const binRef = ref(null);
const mapRef = ref(null);

const chartRefManage = ref(null);
const inventChartRefManage = ref(null);
const main41RefManage = ref(null);
const main4RefManage = ref(null);
const barRefManage = ref(null);
const binRefManage = ref(null);
const mapRefManage = ref(null);

const createLoopDatas = () => {
    const datas: RouteItem[] = [];
    for (let index = 0; index < 11; index++) {
        datas.push({
            sort: (index + 1).toString(),
            routeName: `可滚动数据${index + 1}`,
            count: Math.floor(Math.random() * 1000).toString(),
        });
    }
    return datas;
};
const createBarDatas = () => {
    const datas: CountDateItem[] = [];
    for (let index = 0; index < 8; index++) {
        const date = DateUtils.subtract(new Date(), index, "day");
        datas.push({
            timestamp: date.getDate(),
            dateFormat: DateUtils.date2String(date, "YYYY-MM-DD"),
            count: Math.floor(Math.random() * 2000).toString(),
        });
    }
    return datas;
};
const createPieDatas = () => {
    const datas: CountRangeItem[] = [];
    const base = [
        { Minimum: "0", Maximum: "50" },
        { Minimum: "50", Maximum: "100" },
        { Minimum: "100", Maximum: "150" },
        { Minimum: "150", Maximum: "200" },
    ];
    for (let index = 0; index < base.length; index++) {
        datas.push({
            range: base[index],
            rangeFormat: `${base[index].Minimum}-${base[index].Maximum}`,
            count: Math.floor(Math.random() * 1000).toString(),
        });
    }
    return datas;
};
const createLineDatas = () => {
    const datas: CountDateItem[] = [];
    for (let index = 0; index < 12; index++) {
        const format = (n: number) => {
            return n < 10 ? `0${n}` : `${n}`;
        };
        datas.push({
            timestamp: new Date().getDate(),
            dateFormat: `${format(index)}:00`,
            count: Math.floor(Math.random() * 1000).toString(),
        });
    }
    return datas;
};
const createFlowItem = () => {
    const datas: FlowDirectionItem[] = [];
    for (let index = 0; index < 10; index++) {
        datas.push({
            target: `我是数据${index}`,
            count: Math.floor(Math.random() * 1000).toString(),
        });
    }
    return datas;
};
const createTypeItem = () => {
    const datas: TicketTypeItem[] = [];
    for (let index = 1; index < 4; index++) {
        datas.push({
            type: `类型${index}`,
            count: Math.floor(Math.random() * 1000).toString(),
            price: Math.floor(Math.random() * 1000).toString(),
        });
    }
    return datas;
};
const createPriceItem = () => {
    const datas: TicketPriceItem[] = [];
    for (let index = 1; index < 5; index++) {
        datas.push({
            type: `方式${index}`,
            price: Math.floor(Math.random() * 1000).toString(),
        });
    }
    return datas;
};
const historyData = ref<HistoryDatas>({
    hotRouteList: createLoopDatas(),
    shiftList: createBarDatas(),
    peopleList: createBarDatas(),
    priceList: createPieDatas(),
    ageList: createPieDatas(),
    sexList: [
        {
            sex: "男",
            count: "54",
        },
        {
            sex: "女",
            count: "46",
        },
    ],
    flowDirectionList: createFlowItem(),
});
const realtimeData = ref<RealTimeDatas>({
    accumulateTicketCount: "0",
    saleTicketList: createLineDatas(),
    checkTicketList: createLineDatas(),
    ticketTypeList: createTypeItem(),
    ticketPriceList: createPriceItem(),
    flowDirectionList: createFlowItem(),
});

let realtimeInterval: number | undefined = 0;

const init = (elRef: Ref<HTMLDivElement | null>) => {
    const el = unref(elRef);
    console.log("el--------", el);
    if (!el || !unref(el)) {
        return;
    }

    return echarts.init(el);
};

const getData = () => {
    const opt = {
        grid: {
            top: '50',
            right: '10',
            bottom: '60',
        },
        xAxis: {
            data: ["第一周", "第二周", "第三周", "第四周"],
            splitLine: { show: false }, // 隐藏网格线
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#ffffff",
                    width: 1,
                    type: "solid",
                },
            },

            axisTick: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                rotate: 50,
                show: true,
                splitNumber: 15,
                textStyle: {
                    color: "#ffffff",
                    fontSize: "15",
                },
            },
        },
        yAxis: {
            name: "单位：箱",
            // splitLine: { show: false }, // 隐藏网格线
            axisLabel: {
                //formatter: '{value} %'
                show: true,
                textStyle: {
                    color: "#ffffff",
                    fontSize: "16",
                },
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#ffffff",
                    width: 1,
                    type: "solid",
                },
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#ffffff",
                },
            },
        },
        dataGroupId: "",
        animationDurationUpdate: 500,
        series: {
            type: "bar",
            id: "sales",
            barWidth: '20',
            label:{
                show:true,
                position:'top',
                textStyle: {
                    color: '#ffffff',
                    fontSize: '16'
                },
                formatter:(data: { value: string; }) => {
                    return data.value
                }
            },
            data: [
                {
                    value: 16785,
                    groupId: "one",
                },
                {
                    value: 14408,
                    groupId: "two",
                },
                {
                    value: 16723,
                    groupId: "three",
                },
                {
                    value: 11087,
                    groupId: "four",
                },
                // {
                //     value: 25,
                //     groupId: "five",
                // },
            ],
            itemStyle: {
                normal: {
                    color: "#27d08a",
                    opacity: 1,
                    barBorderRadius: 2,
                },
            },
            universalTransition: {
                enabled: true,
                divideShape: "clone",
            },
        },
    };
    const drilldownData = [
        {
            dataGroupId: "one",
            data: [
                ["星期一", 2526],
                ["星期二", 2526],
                ["星期三", 2382],
                ["星期四", 2086],
                ["星期五", 2571],
                ["星期六", 2490],
                ["星期日", 2204],
            ],
        },
        {
            dataGroupId: "two",
            data: [
                ["星期一", 2204],
                ["星期二", 2204],
                ["星期三", 1953],
                ["星期四", 1884],
                ["星期五", 1708],
                ["星期六", 2207],
                ["星期日", 2248],
            ],
        },
        {
            dataGroupId: "three",
            data: [
                ["星期一", 2248],
                ["星期二", 2248],
                ["星期三", 2481],
                ["星期四", 2220],
                ["星期五", 2274],
                ["星期六", 2434],
                ["星期日", 2817],
            ],
        },
        {
            dataGroupId: "four",
            data: [
                ["星期一", 2817],
                ["星期二", 2817],
                ["星期三", 2869],
                ["星期四", 2584],
            ],
        },
        {
            dataGroupId: "five",
            data: [
                ["星期一", 4.16],
                ["星期二", 3.08],
                ["星期三", 2.52],
                ["星期四", 2.52],
                ["星期五", 3.52],
                ["星期六", 4.52],
                ["星期七", 3.52],
            ],
        },
    ];
    chartRefManage.value.on("click", function (event: { data: { groupId: string; }; }) {
        if (event.data) {
            var subData = drilldownData.find(function (data) {
                return data.dataGroupId === event.data.groupId;
            });
            if (!subData) {
                return;
            }
            chartRefManage.value.setOption({
                xAxis: {
                    data: subData.data.map(function (item) {
                        return item[0];
                    }),
                },
                series: {
                    type: "bar",
                    id: "sales",
                    barWidth: '20',
                    dataGroupId: subData.dataGroupId,
                    data: subData.data.map(function (item) {
                        return item[1];
                    }),
                    universalTransition: {
                        enabled: true,
                        divideShape: "clone",
                    },
                },
                graphic: [
                    {
                        type: "text",
                        right: 10,
                        top: 20,
                        style: {
                            text: "切换周",
                            fontSize: 16,
                            fill: "#ffffff",
                        },
                        onclick: function () {
                            chartRefManage.value.setOption(opt);
                        },
                    },
                ],
            });
        }
    });

    const pathSymbols = {
        reindeer:
            "path://M878.592 144.384h-0.0512c-5.376-37.2224-29.0816-45.4656-62.9248-46.3872-183.9616-4.9152-327.6288 68.4032-434.7392 217.7024-16.3328 22.784-40.3456 43.4688-65.3824 55.9616-81.3568 40.704-142.08 100.5056-181.1968 181.8624-4.9152 10.2912-3.4816 28.8256 3.0208 37.632 4.7104 6.4 23.5008 6.4512 34.5088 3.5328 32.1024-8.5504 63.0272-22.1696 95.3856-29.2352 11.4176-2.5088 28.2112 5.12 38.2464 13.3632 53.6064 43.9808 100.6592 98.7648 159.8464 132.4032 74.9568 42.5984 91.5968 96.1536 70.5536 172.8-3.2256 11.8272 2.6112 34.1504 11.264 38.9632 8.96 5.0176 29.5424-1.5872 39.8336-9.6768 66.816-52.48 111.5136-121.1904 130.6112-203.4688 9.1648-39.6288 28.6208-68.7616 54.528-98.4064 50.3808-57.7024 83.0464-109.8752 101.3248-174.1824 0.1024-0.1024 0.1536-0.2048 0.256-0.256 43.2128-126.7712 4.9152-292.608 4.9152-292.608z m-239.2576 353.1264c-56.8832 6.7072-102.656-30.464-109.1072-88.6784-6.1952-55.9104 31.6928-106.0352 85.9648-113.664 54.0672-7.6288 107.8272 34.6624 114.4832 90.0608 6.7584 56.9856-32.5632 105.3696-91.3408 112.2816z",
        plane: "path://M480 64C215.04 64 0 279.04 0 544 0 808.96 215.04 1024 480 1024S960 808.96 960 544C960 279.04 744.96 64 480 64zM736 576l-256 0C462.08 576 448 561.92 448 544l0-256C448 270.08 462.08 256 480 256S512 270.08 512 288L512 512l224 0C753.92 512 768 526.08 768 544 768 561.92 753.92 576 736 576z",
        train: "path://M94.586667 298.666667l112.466666-187.44a53.593333 53.593333 0 0 1 45.733334-25.893334H512v213.333334zM554.666667 298.666667h417.413333l-112.466667-187.44a53.593333 53.593333 0 0 0-45.733333-25.893334H554.666667z m426.666666 42.666666v544a53.393333 53.393333 0 0 1-53.333333 53.333334H138.666667a53.393333 53.393333 0 0 1-53.333334-53.333334V341.333333z m-298.666666 192a21.333333 21.333333 0 0 0-21.333334-21.333333H405.333333a21.333333 21.333333 0 0 0 0 42.666667h256a21.333333 21.333333 0 0 0 21.333334-21.333334z",
        car: "path://M49.592,40.883c-0.053,0.354-0.139,0.697-0.268,0.963c-0.232,0.475-0.455,0.519-1.334,0.475 c-1.135-0.053-2.764,0-4.484,0.068c0,0.476,0.018,0.697,0.018,0.697c0.111,1.299,0.697,1.342,0.931,1.342h3.7 c0.326,0,0.628,0,0.861-0.154c0.301-0.196,0.43-0.772,0.543-1.78c0.017-0.146,0.025-0.336,0.033-0.56v-0.01 c0-0.068,0.008-0.154,0.008-0.25V41.58l0,0C49.6,41.348,49.6,41.09,49.592,40.883L49.592,40.883z M6.057,40.883 c0.053,0.354,0.137,0.697,0.268,0.963c0.23,0.475,0.455,0.519,1.334,0.475c1.137-0.053,2.762,0,4.484,0.068 c0,0.476-0.018,0.697-0.018,0.697c-0.111,1.299-0.697,1.342-0.93,1.342h-3.7c-0.328,0-0.602,0-0.861-0.154 c-0.309-0.18-0.43-0.772-0.541-1.78c-0.018-0.146-0.027-0.336-0.035-0.56v-0.01c0-0.068-0.008-0.154-0.008-0.25V41.58l0,0 C6.057,41.348,6.057,41.09,6.057,40.883L6.057,40.883z M49.867,32.766c0-2.642-0.344-5.224-0.482-5.507 c-0.104-0.207-0.766-0.749-2.271-1.773c-1.522-1.042-1.487-0.887-1.766-1.566c0.25-0.078,0.492-0.224,0.639-0.241 c0.326-0.034,0.345,0.274,1.023,0.274c0.68,0,2.152-0.18,2.453-0.48c0.301-0.303,0.396-0.405,0.396-0.672 c0-0.268-0.156-0.818-0.447-1.146c-0.293-0.327-1.541-0.49-2.273-0.585c-0.729-0.095-0.834,0-1.022,0.121 c-0.304,0.189-0.32,1.919-0.32,1.919l-0.713,0.018c-0.465-1.146-1.11-3.452-2.117-5.269c-1.103-1.979-2.256-2.599-2.737-2.754 c-0.474-0.146-0.904-0.249-4.131-0.576c-3.298-0.344-5.922-0.388-8.262-0.388c-2.342,0-4.967,0.052-8.264,0.388 c-3.229,0.336-3.66,0.43-4.133,0.576s-1.633,0.775-2.736,2.754c-1.006,1.816-1.652,4.123-2.117,5.269L9.87,23.109 c0,0-0.008-1.729-0.318-1.919c-0.189-0.121-0.293-0.225-1.023-0.121c-0.732,0.104-1.98,0.258-2.273,0.585 c-0.293,0.327-0.447,0.878-0.447,1.146c0,0.267,0.094,0.379,0.396,0.672c0.301,0.301,1.773,0.48,2.453,0.48 c0.68,0,0.697-0.309,1.023-0.274c0.146,0.018,0.396,0.163,0.637,0.241c-0.283,0.68-0.24,0.524-1.764,1.566 c-1.506,1.033-2.178,1.566-2.271,1.773c-0.139,0.283-0.482,2.865-0.482,5.508s0.189,5.02,0.189,5.86c0,0.354,0,0.976,0.076,1.565 c0.053,0.354,0.129,0.697,0.268,0.966c0.232,0.473,0.447,0.516,1.334,0.473c1.137-0.051,2.779,0,4.477,0.07 c1.135,0.043,2.297,0.086,3.33,0.11c2.582,0.051,1.826-0.379,2.928-0.36c1.102,0.016,5.447,0.196,9.424,0.196 c3.976,0,8.332-0.182,9.423-0.196c1.102-0.019,0.346,0.411,2.926,0.36c1.033-0.018,2.195-0.067,3.332-0.11 c1.695-0.062,3.348-0.121,4.477-0.07c0.886,0.043,1.103,0,1.332-0.473c0.132-0.269,0.218-0.611,0.269-0.966 c0.086-0.592,0.078-1.213,0.078-1.565C49.678,37.793,49.867,35.408,49.867,32.766L49.867,32.766z M13.219,19.735 c0.412-0.964,1.652-2.9,2.256-3.244c0.145-0.087,1.426-0.491,4.637-0.706c2.953-0.198,6.217-0.276,7.73-0.276 c1.513,0,4.777,0.078,7.729,0.276c3.201,0.215,4.502,0.611,4.639,0.706c0.775,0.533,1.842,2.28,2.256,3.244 c0.412,0.965,0.965,2.858,0.861,3.116c-0.104,0.258,0.104,0.388-1.291,0.275c-1.387-0.103-10.088-0.216-14.185-0.216 c-4.088,0-12.789,0.113-14.184,0.216c-1.395,0.104-1.188-0.018-1.291-0.275C12.254,22.593,12.805,20.708,13.219,19.735 L13.219,19.735z M16.385,30.511c-0.619,0.155-0.988,0.491-1.764,0.482c-0.775,0-2.867-0.353-3.314-0.371 c-0.447-0.017-0.842,0.302-1.076,0.362c-0.23,0.06-0.688-0.104-1.377-0.318c-0.688-0.216-1.092-0.155-1.316-1.094 c-0.232-0.93,0-2.264,0-2.264c1.488-0.068,2.928,0.069,5.621,0.826c2.693,0.758,4.191,2.213,4.191,2.213 S17.004,30.357,16.385,30.511L16.385,30.511z M36.629,37.293c-1.23,0.164-6.386,0.207-8.794,0.207c-2.412,0-7.566-0.051-8.799-0.207 c-1.256-0.164-2.891-1.67-1.764-2.865c1.523-1.627,1.24-1.576,4.701-2.023C24.967,32.018,27.239,32,27.834,32 c0.584,0,2.865,0.025,5.859,0.404c3.461,0.447,3.178,0.396,4.699,2.022C39.521,35.623,37.887,37.129,36.629,37.293L36.629,37.293z  M48.129,29.582c-0.232,0.93-0.629,0.878-1.318,1.093c-0.688,0.216-1.145,0.371-1.377,0.319c-0.231-0.053-0.627-0.371-1.074-0.361 c-0.448,0.018-2.539,0.37-3.313,0.37c-0.772,0-1.146-0.328-1.764-0.481c-0.621-0.154-0.966-0.154-0.966-0.154 s1.49-1.464,4.191-2.213c2.693-0.758,4.131-0.895,5.621-0.826C48.129,27.309,48.361,28.643,48.129,29.582L48.129,29.582z",
    };
    const labelSetting = {
        show: true,
        position: "right",
        offset: [10, 0],
        fontSize: 16,
        color: '#fff'
    };

    const opts = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
        },
        grid: {
            containLabel: true,
            left: 0,
            right: 50,
        },
        yAxis: {
            data: ["卸货效率", "卸货时长", "卸货数量", "卸货车次"],
            inverse: true,
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
                margin: 10,
                fontSize: 16,
                color: "#ffffff",
            },
            axisPointer: {
                label: {
                    show: true,
                    margin: 30,
                },
            },
        },
        xAxis: {
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            axisLine: { show: false },
        },
        series: [
            {
                type: "pictorialBar",
                label: labelSetting,
                symbolRepeat: true,
                symbolSize: ["80%", "60%"],
                barCategoryGap: "40%",
                data: [
                    {
                        value: 150,
                        symbol: pathSymbols.reindeer,
                    },
                    {
                        value: 2,
                        symbol: pathSymbols.plane,
                    },
                    {
                        value: 400,
                        symbol: pathSymbols.train,
                    },
                    {
                        value: 2,
                        symbol: pathSymbols.car,
                    },
                ],
            },
        ],
    };

    // mapRefManage.value.setOption(mapJson)
    barRefManage.value.setOption(circleOptions(wwData.barData));
    // binRefManage.value.setOption(circleOptions(la));
    main41RefManage.value.setOption(opts);
    chartRefManage.value.setOption(opt);
};
onMounted(() => {
    echarts.registerMap("mapRef", mapJson);
    realtimeInterval = window.setInterval(() => {
        accumulatedSaleTicket.value = wwData.total + jcData.total;
    }, 5 * 1000);
    chartRefManage.value = init(chartRef);
    main4RefManage.value = init(main4Ref);
    main41RefManage.value = init(main41Ref);
    barRefManage.value = init(barRef);
    binRefManage.value = init(binRef);
    mapRefManage.value = init(mapRef);
    getData();
});

onUnmounted(() => {
    if (realtimeInterval) window.clearInterval(realtimeInterval);
});

const onResize = throttle(() => {
    EventBusUtils.post("WindowResize");
}, 500);
window.onresize = onResize;
</script>

<style scoped lang="less">
.bb-card-title {
    width: v-bind(w);
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
    color: #11ebd7;

    background: linear-gradient(
        270deg,
        rgba(39, 247, 237, 0) 0%,
        rgba(17, 235, 215, 0.16) 49%,
        rgba(17, 235, 215, 0.01) 82%,
        rgba(17, 235, 215, 0) 100%
    );
    border-radius: 0px 0px 13px 13px;
}
.flex-in-out {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 30px;
    box-sizing: border-box;
    height: calc(100% - 60px);
    width: 100%;
    .total {
        width: 50%;
        height: 100%;
        position: relative;
        &.green {
            height: 100%;
            background: url(./images/total_green.png) no-repeat center bottom;
            background-size: 90% 60%;
            float: left;
        }
        &.yellow {
            height: 100%;
            background: url(./images/total_yellow.png) no-repeat center bottom;
            background-size: 90% 60%;
            float: left;
        }
        .text {
            position: absolute;
            top: 10%;
            left: 50%;
            width: 200px;
            margin-left: -100px;
            text-align: center;
            color: #ffffff;
        }
        .num {
            position: absolute;
            top: 40%;
            left: 50%;
            width: 200px;
            text-align: center;
            font-weight: bold;
            font-size: 20px;
            margin-left: -100px;

            &.green {
                color: #00d8ff;
            }
            &.yellow {
                color: #ffa200;
            }
        }
    }
}
.flex_start {
    position: absolute;
    right: 10px;
    left: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    &_bottom {
        bottom: 10px;
    }
    .flex_none {
        :deep(.bb-dance-number) {
            margin-left: 15px;
        }
    }
}
:deep(.row-item) {
    height: auto !important;
    padding: 5px 0;
    .ranking-info {
        .info-name,
        .rank,
        .ranking-value {
            font-size: 18px;
        }
        .rank {
            font-weight: bold;
            margin-right: 10px;
        }
    }
}
.left-one-flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    height: 90%;
    .flex_none {
        text-align: center;
        width: 50%;
        box-sizing: border-box;
    }
}

.menu {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 200px;
    position: absolute;
    top: 40px;
    .name {
        display: block;
        font-size: 18px;
        color: #fff;
        width: 80px;
        text-align: center;
        line-height: 40px;
        padding: 0 15px;
        position: relative;
        margin-right: 20px;
        cursor: pointer;
        &:before {
            content: " ";
            border-left: 2px solid #02a6b5;
            left: -1px;
            position: absolute;
            width: 10px;
            height: 5px;
            opacity: 0.4;
            content: "";
            border-top: 2px solid #02a6b5;
            top: -1px;
            border-radius: 2px;
        }
        &:after {
            content: " ";
            border-right: 2px solid #02a6b5;
            right: -1px;
            position: absolute;
            width: 10px;
            height: 5px;
            opacity: 0.4;
            content: "";
            border-bottom: 2px solid #02a6b5;
            bottom: -1px;
            border-radius: 2px;
        }
        &:hover {
            color: #00d8ff;
        }
    }
}

// 外部css
.visual_conTop_box {
    height: 100%;
    padding: 0 3px;
}
.visual_conTop1 {
    width: 240px;
    height: 100px;
}
.visual_conTop1 div {
    background: url(./images/ksh40.png) no-repeat;
    background-size: 100% 100%;
}
.visual_conTop2 {
    width: 30%;
    height: 100%;
    float: left;
}
.visual_conTop2 > div {
    background: url(./images/ksh39.png) no-repeat;
    background-size: 100% 100%;
}
.visual_right {
    width: 25%;
    height: 100%;
    float: right;
}
.visual_conTop_box > div {
    height: 100%;
}
.visual_conTop_box > div h3 {
    color: #fff;
    font-size: 18px;
    padding: 16px 0 0 20px;
}
.visual_conTop_box > div p {
    width: 100%;
    color: #20dbfd;
    margin: 0;
    text-shadow: 0 0 25px #00d8ff;
    font-size: 46px;
    text-align: center;
}
.visual_conTop_box > div .conTop_smil {
    width: 67%;
    height: 60px;
    padding-top: 23px;
}
.visual_conTop_box > div .conTop_smil a {
    display: block;
    line-height: 20px;
    text-align: left;
    color: #fff;
    padding-left: 9px;
}
.visual_conTop_box > div .conTop_smil span {
    width: 32px;
    display: inline-block;
    margin-left: 3px;
}
.visual_conTop_box > div .conTop_smil a.sz {
    color: #fe3e12;
}
.visual_conTop_box > div .conTop_smil a.xd {
    color: #12fe81;
}
.visual_conTop_box > div .conTop_smil a.null {
    visibility: hidden;
}
</style>
